<template>
	<div>
		<span>当前页</span>
		<input type="checkbox" v-model="active"/>
		<span>所有页</span>
		<input type="checkbox" v-model="all" />
		<table>
			<tr v-for="item in user">
				<td>
					<input type="checkbox" v-model="item.isCheck" />
				</td>
				<td>{{item.name}}</td>
			</tr>
		</table>
		<div>
			<button @click="submit">提交</button>
		</div>
	</div>
</template>

<script>
	export default{
		data () {
			return {
				user:[{
					name: '张三',
					id: 213,
					isCheck: false
				},{
					name: '李四',
					id:23213,
					isCheck: false
				},{
					name: '赵武',
					id: 2312321,
					isCheck: false
				}],
				nowSelect: '',
        checkedArr: []
			}
		},
		computed: {
			active : {
				get: function (){
					var a = true
					this.user.forEach((element) => {
						if (element.isCheck === false) {
							a = false
							//防止点了单独的一条但是nowSelect没改变 引起的错误
							this.nowSelect = ''
						}
					})
					return a
				},
				set: function (){
					if (this.nowSelect === '') {
						this.nowSelect = 'active'
						var a = true
					} else if (this.nowSelect === 'all') {
						this.nowSelect = 'active'
						var a = true
					} else {
						this.nowSelect = ''
						var a = false
					}
					this.user.forEach((element) => {
						element.isCheck = a
					})
				}
			},
			all : {
				get: function (){
					if (this.nowSelect === 'all') {
						return true
					} else {
						return false
					}
				},
				set: function (){
					if (this.nowSelect === 'all') {
						this.nowSelect = ''
						var a = false
					} else {
						this.nowSelect = 'all'
						var a = true
					}
					this.user.forEach((element) => {
						element.isCheck = a
					})
				}
			}
		},
		methods: {
			submit () {
				if (this.nowSelect === 'all') {
					console.log('提交全部')
				} else {
					var arr = []
					this.user.forEach((element) => {
						if(element.isCheck === true) {
							arr.push(element.id)
						}
					})
					console.log(arr.toString())
				}
			}
		}
	}
</script>